<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>05-rootList</title>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/material-teal/easyui.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/color.css">
  <style>
    label[class="error"]{
      color:#f00;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <br>
    <h3>管理员记录</h3>
    <hr>
    <div class="">
      <table id="dg" class="easyui-datagrid" style="width:100%;height:480px;" 
        data-options="rownumbers:true,pagination:true,singleSelect:true,
        url:'${pageContext.request.contextPath }/rootList?method=getRootListForEasyUI',
        method:'post',fitColumns:true,striped:true,toolbar:'#toolbar'">
        <thead>
          <tr>
            <th scope="col" data-options="field:'username',width:100">用户名</th>
            <th scope="col" data-options="field:'realname',width:100">真实姓名</th>
            <th scope="col" data-options="field:'cellphone',width:100">手机号码</th>
            <th scope="col" data-options="field:'email',width:100">邮箱</th>
            <th scope="col" data-options="field:'limitFlag',width:100">权限级别</th>
          </tr>
        </thead>
      </table>
    </div>
    <!-- 添加,编辑,移除按钮 -->
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton addManagerCls" data-options="iconCls:'icon-add',plain:true" onclick="addManager()">添加管理员</a>
        <a href="javascript:void(0)" class="easyui-linkbutton detailManagerCls" data-options="iconCls:'icon-edit',plain:true" onclick="detailManager()">编辑管理员</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="destroyManager()">移除管理员</a>
    </div>
  </div><!-- container -->

  <!-- 添加管理员的Modal : addRootModal -->
  <div class="modal fade" id="addRootModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">添加管理员</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="#" method="post" id="addNewManagerForm">
            <div class="form-group row">
              <label for="forAddUsername" class="col-sm-3 col-form-label text-center">用户名</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forAddUsername" name="addUsername">
              </div>
            </div>
            <div class="form-group row">
              <label for="forAddRealname" class="col-sm-3 col-form-label text-center">真实姓名</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forAddRealname" name="addRealname">
              </div>
            </div>
            <div class="form-group row">
              <label for="forAddPassword" class="col-sm-3 col-form-label text-center">密码</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forAddPassword" value="123456" readonly name="addPassword">
              </div>
            </div>
            <div class="form-group row">
              <label for="forAddCellphone" class="col-sm-3 col-form-label text-center">联系方式</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forAddCellphone" name="addCellphone">
              </div>
            </div>
            <div class="form-group row">
              <label for="forAddEmail" class="col-sm-3 col-form-label text-center">邮箱</label>
              <div class="col-sm-9">
                <input type="email" class="form-control" id="forAddEmail" name="addEmail">
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3"></label>
              <div class="col-sm-9">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="forAddMan" name="addGender" class="custom-control-input" value="1" checked>
                  <label class="custom-control-label" for="forAddMan">男</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="forAddWoman" name="addGender" class="custom-control-input" value="0">
                  <label class="custom-control-label" for="forAddWoman">女</label>
                </div>
              </div>
            </div>
<!--             <div class="form-group row">
              <label class="col-sm-3"></label>
              <div class="col-sm-9">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="forAddSupper" name="addLimitFlag" class="custom-control-input" value="0">
                  <label class="custom-control-label" for="forAddSupper">超级管理员</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="forAddGeneral" name="addLimitFlag" class="custom-control-input" value="1" checked>
                  <label class="custom-control-label" for="forAddGeneral">普通管理员</label>
                </div>
              </div>
            </div> -->
            <div class="form-group row">
              <label for="forAddResume" class="col-sm-3 col-form-label text-center">个人简介</label>
              <div class="col-sm-9">
                <textarea id="forAddResume" class="form-control" name="addResume" rows="3"></textarea>
              </div>
            </div>
          </form>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary submitAddManagerBtn">添加</button>
		      </div><!-- modal-footer -->
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal fade -->

  <!-- 个人详细信息Modal : showManagerDetail -->
  <div class="modal fade" id="showManagerDetail" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">详细信息</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="#" method="post" id="editManagerForm">
            <div class="form-group row">
              <label for="forShowUsername" class="col-sm-3 col-form-label text-center">用户名</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forShowUsername" readonly>
              </div>
            </div>
            <div class="form-group row">
              <label for="forShowRealname" class="col-sm-3 col-form-label text-center">真实姓名</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forShowRealname">
              </div>
            </div>
            <div class="form-group row">
              <label for="forShowPassword" class="col-sm-3 col-form-label text-center">密码</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forShowPassword" name="forShowPassword">
              </div>
            </div>
            <div class="form-group row">
              <label for="forShowCellphone" class="col-sm-3 col-form-label text-center">联系方式</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forShowCellphone" name="forShowCellphone">
              </div>
            </div>
            <div class="form-group row">
              <label for="forShowEmail" class="col-sm-3 col-form-label text-center">邮箱</label>
              <div class="col-sm-9">
                <input type="email" class="form-control" id="forShowEmail">
              </div>
            </div>
            <!-- 添加2019/02/22 -->
            <div class="form-group row">
              <label class="col-sm-3 col-form-label text-center"></label>
              <div class="col-sm-9">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="forShowMan" name="showGender" class="custom-control-input forShowMan" value="1">
                  <label class="custom-control-label" for="forShowMan">男</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="forShowWoman" name="showGender" class="custom-control-input forShowWoman" value="0">
                  <label class="custom-control-label" for="forShowWoman">女</label>
                </div>
              </div>
            </div>
            <!-- 添加2019/02/22 -->
<!--             <div class="form-group row">
              <label class="col-sm-3"></label>
              <div class="col-sm-9">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="forShowSupper" name="showLimitFlag" class="custom-control-input forShowSupper" value="0">
                  <label class="custom-control-label" for="forShowSupper">超级管理员</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="forShowGeneral" name="showLimitFlag" class="custom-control-input forShowGeneral" value="1">
                  <label class="custom-control-label" for="forShowGeneral">普通管理员</label>
                </div>
              </div>
            </div> -->
            
            <div class="form-group row">
              <label for="forShowResume" class="col-sm-3 col-form-label text-center">简介</label>
              <div class="col-sm-9">
                <textarea id="forShowResume" class="form-control" rows="3"></textarea>
              </div>
            </div>
          </form>
        </div><!-- modal-body -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary submitEditManagerBtn">确定</button>
        </div><!-- modal-footer -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal fade -->

  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.validate.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/messages_zh.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/locale/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript">
    // 添加管理员 按钮，做一些准备工作
    function addManager(){
    	$(".addManagerCls").attr('data-toggle','modal');
    	$(".addManagerCls").attr('data-target','#addRootModal');
    	$(".submitAddManagerBtn").removeAttr('data-dismiss','modal');
      $("#forAddUsername").val("");
      $("#forAddRealname").val("");
      $("#forAddCellphone").val("");
      $("#forAddEmail").val("");
      $("#forAddResume").val("");
      $("label.error").remove();
    }

    // 保存管理员到数据库
    function saveNewManager(){
     	var username = $("#forAddUsername").val();
     	var password = $("#forAddPassword").val();
     	var realname = $("#forAddRealname").val();
     	var cellphone= $("#forAddCellphone").val();
     	var email = $("#forAddEmail").val();
     	var gender = $("input:radio[name='addGender']:checked").val();
     	var resume = $("#forAddResume").val();
     	$(".submitAddManagerBtn").attr('data-dismiss','modal');
     	$.post(
     		"/LostAndFound/rootList?method=handleAddMangerEasyUI",
     		{
     			"username":username,
     			"password":password,
     			"realname":realname,
     			"cellphone":cellphone,
     			"email":email,
     			"gender":gender,
     			"resume":resume
     		},
     		function(result){
     			  if (!result.success) {
     				  $.messager.show({
     					  title : 'Error',
     					  msg : "添加错误！"
     					});
            } else {
                $('#dg').datagrid('reload'); // reload the info data
            }
     		},
     		"json"
     	);// end of $.post()
    }
    // 展示管理员细节进行编辑
    function detailManager(){
    	var row = $("#dg").datagrid("getSelected");
    	if(row){
    		$("label.error").remove();// 移除校验错误提醒
    		$(".detailManagerCls").attr('data-toggle','modal');
    		$(".detailManagerCls").attr('data-target','#showManagerDetail');
    		$(".submitEditManagerBtn").removeAttr('data-dismiss','modal');
    		$("#forShowUsername").val(row.username);
    		$("#forShowPassword").val(row.password);
    		$("#forShowRealname").val(row.realname);
    		$("#forShowCellphone").val(row.cellphone);
    		$("#forShowEmail").val(row.email);
    		$("#forShowResume").val(row.resume);
    		$("#forShowGender").val(row.gender);
    		$("#forShowLimit").val(row.limitFlag);

    		if(row.genderNum==1){
    			$(".forShowMan").prop("checked","checked");
    		}else if(row.genderNum==0){
    			$(".forShowWoman").prop("checked","checked");
    		}
    	}
    }
    // 确定编辑管理员
    function submitEditMnager(){
    	  var row = $("#dg").datagrid("getSelected");
        var password = $("#forShowPassword").val();
        var realname = $("#forShowRealname").val();
        var cellphone= $("#forShowCellphone").val();
        var email = $("#forShowEmail").val();
        var gender = $("input:radio[name='showGender']:checked").val();
        var resume = $("#forShowResume").val();
    	  $(".submitEditManagerBtn").attr('data-dismiss','modal');
    	  $.post(
    			  "/LostAndFound/rootList?method=handleEditManagerEasyUI",
    			  {
    				  "rid":row.rid,
    				  "password":password,
    				  "realname":realname,
    				  "cellphone":cellphone,
    				  "email":email,
    		      "gender":gender,
    		      "resume":resume
    			  },
    			  function(data){
    		        if (!data.success) {
    		          $.messager.show({
    		            title : 'Error',
    		            msg : "修改错误！"
    		          });
    		        } else {
    		            $('#dg').datagrid('reload'); // reload the info data
    		        }
    			  },
    			  "json"
    	  );
    }
    // 移除管理员
    function destroyManager(){
    	var row = $('#dg').datagrid('getSelected');
    	if(row){
    		$.messager.confirm('Confirm','确定删除此管理员？',function(r){
    			if(r){
    				$.post(
    					"/LostAndFound/rootList?method=handleDeleteRootForEasyUI",
    					{"rid":row.rid},
    					function(data){
    						if(data.success){
    							$("#dg").datagrid('reload');
    						}else{
    							$.messager.show({
    								title: 'Error',
    								msg:'删除错误！'
    							});
    						}
    					},
    					"json"
    				);
    			}
    		})
    	}
    }
  </script>
  <script type="text/javascript">
    $(function(){
     	  jQuery.validator.setDefaults({
    		  success: "valid"
    		}); 
    	  // 添加管理员时，表单审核, remote验证用户名是否可用
    	  $("#addNewManagerForm").validate({
    	    rules:{
    	      addUsername:{
    	        required:true,
    	        minlength:4,
    	        remote:{
    	        	url:"/LostAndFound/rootList?method=checkAddUsername",
    	        	type:"post",
    	        	dataType:"json",
    	        	data:{
    	        		addUsername:function(){
    	        			return $("#forAddUsername").val();
    	        		}
    	        	}
    	        }
    	      },
    	      addPassword:{
    	    	  required:true,
              minlength:6
    	      },
    	      addCellphone:{
    	    	  required:true
    	      }
    	    },
    	    messages:{
    	    	addUsername:{
    	    		remote:"用户名不可用"
    	    	}
    	    }
    	  });
    	  // 编辑时，校验规则，联系方式不能少
    	  $("#editManagerForm").validate({
    		  rules:{
    			  forShowCellphone:{
    				  required:true
    			  },
    			  forShowPassword:{
    				  required:true    				  
    			  }
    		  }
    	  });
    	  // 输入数据后，点击添加按钮，添加管理员
    	  $(".submitAddManagerBtn").on("click",function(){
    		  // $("#addNewManagerForm").valid()校验，返回Boolean
    		  if($("#addNewManagerForm").valid()){
    	      saveNewManager();    			  
    		  }
    	  });
    	  // 确定修改管理员数据
    	  $(".submitEditManagerBtn").on("click",function(){
    		  if($("#editManagerForm").valid()){
	    		  submitEditMnager()
    		  }
    	  });
    });
  </script>
</body>
</html>